import { useEffect, useState } from "react";
// 所有hooks函数都是以use开头
export default function App() {
    // 1. componentDidMount
    // 2. componentDidUpdate
    // 3. componentWillUnMount
    const [count, setCount] = useState(0);
    const [random, setRandom] = useState(0);

    const [obj, setObj] = useState({});
    const [arr, setArr] = useState([]);
    // 第三种用法
    // 第一个参数传函数，第二个参数传依赖值数组：componentDidMount + 依赖值监听
    // 注意点：不要对依赖项说谎
    useEffect(() => {
        console.log("count:" + count);
    }, [count]);

    // 问题点：第二个参数为依赖项引用类型时候，依赖项函数会一直触发
    // 第一种解决方案传依赖项属性值
    // useEffect(() => {
    //     console.log("obj:", obj);
    // }, [obj.name]);
    // 第二种方案将对象或者数组转换字符串
    // useEffect(() => {
    //     console.log("obj:", obj);
    // }, [JSON.stringify(obj)]);
    // 第三种方案，可以在函数中判断比较
    // useEffect(() => {
    //     console.log("obj:", obj);
    //     if (obj.name) {
    //         // 执行代码
    //     }
    // }, [obj]);
    useEffect(() => {}, [arr.length]);
    return (
        <div>
            <p id="p">count: {count}</p>
            <p>random: {random}</p>
            <p>obj: {JSON.stringify(obj)}</p>
            <button
                onClick={() => {
                    if (count < 10) {
                        setCount(count + 1);
                    }
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button>
            <button
                onClick={() => {
                    setObj({ name: "我是程序员" });
                }}>
                修改对象
            </button>
        </div>
    );
}
